<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>试卷管理</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .bottom-delete {

            color: white;
            border-color: #7D7D7D;
            background-color: #7D7D7D
        }

        .bottom-main {
            color: aliceblue;
            border-color: #6666FF;
            background-color: #6666FF
        }

        .bottom-main:hover {
            color: aliceblue;
            border-color: #8080FF;
            background-color: #8080FF
        }

        .bottom-main:active {
            color: aliceblue;
            border-color: #4D4DFF;
            background-color: #4D4DFF
        }

        .bottom-main:focus {
            color: aliceblue;
            border-color: #4D4DFF;
            background-color: #4D4DFF
        }

    </style>
</head>
<body>
<div id="app" style="width: 90%;margin-left: 50px;margin-top: 50px">
    <b style="color: #000066; font-size: 25px; margin-left:35px; margin-top:30px; font-style: oblique">试卷管理</b>
    <el-dialog title="试卷信息" :visible.sync="dialogFormVisible">
        <el-form :model="paper">
            <el-form-item label="试卷名字">
                <el-input v-model="paper.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="试卷封面">
                <el-upload
                        :headers="uploadHeaders"
                        class="avatar-uploader"
                        action="/paper/upload"
                        name="cover"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" height="300px" width="200px" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="试卷等级">
                <el-select v-model="paper.level" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-rate v-model="paper.star"></el-rate>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button class="bottom-main" type="primary" @click="doAddOrEdit">确 定</el-button>
        </div>
    </el-dialog>

    <div style="float: right">
        <el-button class="bottom-main" @click="toAdd" type="success">添加试卷</el-button>
    </div>

    <el-table
            :data="pagination.items"
            style="width: 100%">
        <!--prop数组中对象的属性名，label是显示的内容-->
        <!--        <el-table-column-->
        <!--                type="index"-->
        <!--                width="50">-->
        <!--        </el-table-column>-->
        <el-table-column
                prop="id"
                label="试卷id"
                width="200">
        </el-table-column>
        <el-table-column
                prop="name"
                label="试卷名称"
                width="260">
        </el-table-column>

        <el-table-column
                prop="total"
                label="试题数量"
                width="260">
        </el-table-column>

        <el-table-column label="操作"
                         width="300">
            <template slot-scope="scope">
                <!--
                    scope.row 表示当前行的对象
                    scope.row.id 表示当前行对象的id
                -->
                <el-button
                        @click="toQuestionPage(scope.row.id)"
                        size="mini"
                        icon="el-icon-search">查看
                </el-button>
                <el-button
                        @click="toEdit(scope.row.id)"
                        size="mini"
                        icon="el-icon-edit">编辑
                </el-button>
                <el-button
                        @click="deletePaper(scope.row.id)"
                        size="mini" type="danger"
                        icon="el-icon-delete">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 50px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.page"
                :page-sizes="[3, 5, 8, 10]"
                :page-size="pagination.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.counts">
        </el-pagination>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            addOrEdit: true,
            paper: {},
            dialogFormVisible: false,
            tableData: [],//表格数据
            pagination: {
                items: [],
                page: 1, //当前页
                pagesize: 10,    //每页显示条数
                counts: 0        //总条数
            },
            authorization: "",
            options: [{
                value: 'easy',
                label: '简单'
            }, {
                value: 'medium',
                label: '中等'
            }, {
                value: 'hard',
                label: '困难'
            }],
            imageUrl: "",
            Authorization: "",
            uploadHeaders: {}
        },
        methods: {
            findByPage() {
                let url = '/paper?page=' + this.pagination.page + "&pagesize=" + this.pagination.pagesize;
                axios.get(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    this.pagination = resp.data;
                });
            },
            findById(id) {
                let url = '/paper/findById/' + id;
                axios.get(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    this.paper = resp.data;
                    this.imageUrl = this.paper.cover;
                });
            },
            handleSizeChange(val) {
                this.pagination.pagesize = val;
                this.findByPage();
            },
            handleCurrentChange(val) {
                this.pagination.page = val;
                this.findByPage();
            },
            doAddOrEdit() {
                if (this.addOrEdit) {
                    //如果标记是true，执行添加
                    this.doAdd();
                } else {
                    //如果标记是false，就执行修改
                    this.doEdit();
                }
            },
            toQuestionPage(paperId) {
                location.href = 'question.html?paperId=' + paperId;
            },
            toEdit(id) {
                //将dialog窗口的标记改成false表示在进行修改
                this.addOrEdit = false;
                //先根据id查询该用户
                this.findById(id);
                //弹框
                this.dialogFormVisible = true;
            },
            doEdit() {
                let url = '/paper';
                axios.put(url, this.paper, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    //成功，重新查询数据
                    this.findByPage();
                    //关闭弹出框
                    this.dialogFormVisible = false;
                });
            },
            toAdd() {
                this.dialogFormVisible = true;
                //将dialog标记改成添加的标记【true】
                this.addOrEdit = true;
                //把user对象的内容清空
                this.paper = {};
                this.imageUrl = '';
                //弹出dialog窗口
            },
            doAdd() {
                let url = '/paper/savePaper';
                axios.post(url, this.paper, {headers: {"Authorization": this.Authorization}}).then(resp => {
                    //添加成功，重新查询
                    this.findByPage();
                    //关闭弹出框
                    this.dialogFormVisible = false;
                });
            },
            deletePaper(id) {
                let confirm = window.confirm("确定要删除吗？");
                if (confirm) {
                    let url = '/paper/' + id
                    axios.delete(url, {headers: {"Authorization": this.Authorization}}).then(resp => {
                        this.findByPage();
                    });
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.paper.cover = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created() {
            this.Authorization = localStorage.getItem("Authorization");
            this.uploadHeaders = {"Authorization": this.Authorization};
            this.findByPage();
        }
    });
</script>
</html>